<template>
    <rx-layout>
        <div slot="center">
            <a-form :form="form" style="height: 100%;">
                <a-row>
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.fieldKey','字段标识')">
                            <a-select :placeholder="i18n('form.fieldKey','字段标识')" :options="fieldDatas" v-decorator="['fieldName',{rules: [{ required: true, message: i18n('form.fieldKey','字段标识','input') }] }]" @change="fieldChange"></a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="showDefault">
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.remarks','字段备注')">
                            <a-input :placeholder="i18n('form.remarks','字段备注')" v-decorator="['fieldLabel',{rules: [{ required: true, message: i18n('form.remarks','字段备注','input')}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.typeComparison','比较类型')">
                            <a-select :placeholder="i18n('form.typeComparison','比较类型')" :options="opData" v-decorator="['fieldOp']"></a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="!showDefault">
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.remarks','字段备注')">
                            <a-input :placeholder="i18n('form.remarks','字段备注')" v-decorator="['fieldLabel',{rules: [{ required: true, message: i18n('form.remarks','字段备注','input') }] }]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.valueSource','值来源')">
                            <a-radio-group :options="fromOptions" @change="fromChange" v-decorator="['from',{rules: [{ required: true, message: i18n('form.valueSource','值来源','input')}] }]" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.multiSelect','是否多选')">
                            <a-radio-group v-decorator="['multiSelect',{rules: [{ required: true, message:i18n('form.select','请选择')}] }]">
                                <a-radio :value="true">{{i18n('isMap.yes','是')}}</a-radio>
                                <a-radio :value="false">{{i18n('isMap.no','否')}}</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="from=='self'">
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.option','选项')">
                            <div class="table-operator">
                                <a-button @click="addRow">{{$ti18('rxList.add', '新增')}}</a-button>
                                <a-button @click="removeRow">{{$ti18('rxList.delBtn','删除')}}</a-button>
                                <a-button @click="upRow">{{$comi18('grid.up', '向上')}}</a-button>
                                <a-button @click="downRow">{{$comi18('grid.down', '向下')}}</a-button>
                            </div>
                            <rx-grid ref="props"
                                     :bordered="true"
                                     :allowRowSelect="true"
                                     :multiSelect="true"
                                     style="min-height:300px;"
                                     :dataSource="dataSource"
                                     :columns="columns"
                                     :showPage="false">
              <span slot="name" slot-scope="{text,record,index,blur}">
                <a-input v-model="record.name" @blur="blur(index,'name',text,record)" />
              </span>
                                <span slot="key" slot-scope="{text,record,index,blur}">
                <a-input v-model="record.key" @blur="blur(index,'key',text,record)" />
              </span>
                            </rx-grid>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="from=='url'">
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" label="JSON URL">
                            <a-input v-decorator="['url',{rules: [{ required: from=='url',message:rowi18n('form.requiredURL','URL必填')}] }]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="from=='url'">
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="rowi18n('form.textField','文本字段')">
                            <a-input v-decorator="['url_textfield',{rules: [{ required: from=='url',message: rowi18n('form.textField','文本字段') + $comi18('formbase.mustInput', '必填!')}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="rowi18n('form.numField','数值字段')">
                            <a-input v-decorator="['url_valuefield',{rules: [{ required: from=='url',message:rowi18n('form.numField','数值字段') + $comi18('formbase.mustInput', '必填!')}] }]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="from=='dic'">
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="rowi18n('form.dataDicItem','数据字典项')">
                            <rx-input-button v-decorator="['dicKey',{rules: [{ required: from=='dic',message: rowi18n('form.dataDicItem','数据字典项') + $comi18('formbase.mustInput', '必填!')}] }]"
                                             @click="selectDic"
                                             style="width: 100%;">
                            </rx-input-button>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="from=='sql'">
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="rowi18n('form.customSQL','自定义SQL')">
                            <rx-input-button ref="sql" @click="openCustomQuery" v-decorator="['sql',{rules: [{ required: from=='sql',message: rowi18n('form.customSQL','自定义SQL') + $comi18('formbase.mustInput', '必填!')}] }]" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="from=='sql'">
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="rowi18n('form.textField','文本字段')">
                            <a-select :options="sqlFields" v-decorator="['sql_textfield',{rules: [{ required: from=='sql',message:rowi18n('form.textField','文本字段') + $comi18('formbase.mustInput', '必填!')}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="rowi18n('form.numField','数值字段')">
                            <a-select :options="sqlFields" v-decorator="['sql_valuefield',{rules: [{ required: from=='sql',message:rowi18n('form.numField','数值字段') + $comi18('formbase.mustInput', '必填!')}] }]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="from=='grant'">
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="rowi18n('form.authority','权限分类')">
                            <rx-input-button ref="grant" @click="openFormEntityDataType" v-decorator="['grant',{rules: [{ required: from=='grant',message: rowi18n('form.authority','权限分类') + $comi18('formbase.mustInput', '必填!')}] }]" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="showDefault">
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="rowi18n('form.default','默认值')">
                            <a-input :placeholder="rowi18n('form.default','默认值')" v-model="defaultVal" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </rx-layout>

</template>

<script>
    import {RxGrid,Util,Dialog,RxInputButton,RxLayout,App} from "@lowcode/jpaas-common-lib";
    import miniQuery from './miniQuery';
    import SysTreeApi from "@/api/system/core/sysTree";
    export default {
        name: "miniQuery_checkboxgroup",
        mixins:[miniQuery,App],
        components:{
            RxGrid,
            RxInputButton,
            RxLayout
        },
        data() {
            return {
                from:"",
                fromOptions:
                    [{'value':'self','label':this.rowi18n('form.custom','自定义')},
                    {'value':'url','label':'URL'},
                    {'value':'dic','label':this.rowi18n('form.dataDictionary','数据字典')},
                    {'value':'sql','label':this.rowi18n('form.customSQL','自定义SQL')},
                    {'value':'grant','label':this.rowi18n('form.data','权限数据')}],
                dataSource:[],
                columns:[
                    {title: this.$ti18('rxList.index', '序号'), type: 'indexColumn', width: 80, dataIndex: 'serial', scopedSlots: {customRender: 'serial'}},
                    {title: this.$ti18('rxForm.name', '名称'), dataIndex: 'name', width: 120,allowCellEdit:true,scopedSlots: {customRender: 'name'}},
                    {title:this.rowi18n('form.name','标识名'), dataIndex: 'key', width: 120,allowCellEdit:true,scopedSlots: {customRender: 'key'}}
                ],
                dicTree:[],
                sqlFields:[],
                defaultVal:""
            }
        },
        created(){

            this.loadDicTree();
        },
        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "miniQuery", key);
            },
            rowi18n(name, text, key) {
                return this.$ti18(name, text, "rowControls", key);
            },
            loadDicTree(){
                SysTreeApi.listDicTree(this.curApp.appId).then(res => {

                    var cloneData = [];
                    res.forEach(function(item) {
                        cloneData.push({
                            title: item.name,
                            key: item.treeId,
                            value: item.alias,
                            parentId: item.parentId
                        })
                    })
                    var treeData=Util.listToTree(cloneData,"key","parentId");
                    this.dicTree = treeData;
                })
            },
            customSetData(data) {
                let self=this;
                this.mdl=Object.assign({multiSelect:false,from:'self'},data);
                this.from=this.mdl.from;
                if(this.mdl.sql) {
                    this.mdl.sql = '{value:\'' + this.mdl.sql + '\',text:\'' + this.mdl.sql_name + '\'}';
                }
                if(this.mdl.grant){
                    this.mdl.grant = '{value:\'' + this.mdl.grant + '\',text:\'' + this.mdl.grant_name + '\'}';
                }
                if(this.mdl['dicKey']){
                    this.mdl['dicKey'] = '{value:\'' + this.mdl['dicKey'] + '\',text:\'' + this.mdl['dicName'] + '\'}';
                }
                this.sqlFields = this.mdl.sqlFields || [];
                var props=this.mdl.props || '[]';
                this.dataSource=JSON.parse(props);
                var defaultValConf=this.mdl.defaultValConf;
                if(defaultValConf){
                    this.defaultVal=JSON.parse(defaultValConf).defaultVal;
                }
            },
            //选择数据字典
            selectDic(vm){
                var conf = {
                    curVm: this, data: {allowTree:true}, widthHeight: ['800px', '600px'],
                }
                let self_ = this;
                Dialog.openSysDicDialog(conf,function (curVue, row) {
                    self_.$set(self_.mdl,"dicKey",row.alias);
                    vm.setVal(row.alias,self_.$i18(row.name,"名称"));
                })
            },
            customGetData(){
                this.mdl.props = JSON.stringify(this.$refs.props.getData());

                var sql = this.$refs.sql.getVal();
                this.mdl.sql=sql.value;
                this.mdl.sql_name=sql.text;
                this.mdl.sqlFields=this.sqlFields;
                var grant = this.$refs.grant.getVal();
                this.mdl.grant=grant.value;
                this.mdl.grant_name=grant.text;
                var defaultValConf={type:'checkboxgroup',defaultVal:this.defaultVal};
                this.mdl.defaultValConf=JSON.stringify(defaultValConf);
            },
            fromChange(e){
                this.from=e.target.value;
            },
            addRow(){
                this.$refs.props.addRow();
            },
            removeRow(){
                this.$refs.props.removeRows();
            },
            upRow(){
                this.$refs.props.moveUp();
            },
            downRow(){
                this.$refs.props.moveDown();
            },
            openFormEntityDataType(vm){
                var self=this;
                var config={curVm:this,widthHeight:['800px','600px'],data:{multiSelect:false}};
                Dialog.openFormEntityDataTypeDialog(config,function(ary){
                    var data=ary[0];
                    vm.setVal(data.id,data.name);
                })
            },
            openCustomQuery(vm){
                Dialog.openCustomDataDialog({
                    curVm: this, widthHeight: ['1200px', '600px']
                }, function (self, data) {
                    self.loadFields(data);
                    vm.setVal(data.key,data.name);
                })
            },
            loadFields(row){
                var fieldStr=row.resultField;
                if(fieldStr) {
                    var fileds = JSON.parse(fieldStr);
                    var ary = fileds.map(function (item) {
                        return {
                            value: item.fieldName,
                            label: item.comment
                        }
                    })
                    this.sqlFields = ary;
                }
            }
        }
    }
</script>

<style scoped>

</style>